<template>
	<div class="portrait">
		<div class="head">
			<router-link tag="div" to="/personal" class="rou"><</router-link>
			<div class="zd">个人头像</div>
			<div class="sx" @click="demo">···</div>
		</div>
		<div class="tx">
			<div class="img">
				<img src="../../images/head.png" alt="" />
			</div>
		</div>
		<div class="show" v-show="flag">
			<ul class="s">
				<li>拍照</li>
				<li>从手机相册选择</li>
				<li>保存图片</li>
			</ul>
			<ul class="ss">
				<li>取消</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:"portrait",
		data(){
			return{
				flag:false
			}
		},
		methods:{
			demo(){
				this.flag = !this.flag;
			}
		}
	}
</script>

<style lang="less">
	.portrait{
		.show{
			margin-top: 30/50rem;
			.s{
				background: #fff;
				li{
					text-align: center;
					height: 50/50rem;
					line-height: 50/50rem;
					border-bottom: 2/50rem;
					font-size: 16/50rem;
				}
			}
			.ss{
				background: #fff;
				margin-top: 10/50rem;
				li{
					height: 50/50rem;
					line-height: 50/50rem;
					text-align: center;
					font-size: 16/50rem;
				}
			}
		}
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zd{
				margin-left: 130/50rem;
			}
			.sx{
				margin-left: 100/50rem;
			}
		}
		.tx{
			.img img{
				width: 100%;
				margin-top: 100/50rem;
			}
		}
	}
</style>